/* 
 *  全局风格样式
 * 
 * 备注：成员可以添加风格，添加后请做两件事：
 *      1.为你的风格添加注释，并取一个有语义的名称
 *      2.将新增的变量发送到群里，告知全体成员！【重要】
 */
/* 
  * ### 适配 ### =============================
  * 使用方式：
  *   原数值:16px --->  适配后:(16/@rem)
*/
/* 
  ### 颜色 ### =============================
*/
/* 
  ### 大小 ### =============================
*/
/* 
    ########### 公共版式 ###########
*/
/* 顶栏样式 */
.topStyle {
  width: 100%;
  height: 1.33333333rem;
  display: flex;
  align-items: center;
  background-color: #fff;
}
/* 通用顶栏 */
/* 
预设代码：
<div class="topPreset">
    <a href="#">
    <span class="iconfont icon-xiangzuo1"></span>
    </a>
    <h2>标题</h2>
</div>
*/
.topPreset {
  width: 100%;
  height: 1.33333333rem;
  display: flex;
  align-items: center;
  background-color: #fff;
  text-align: center;
  padding-left: 0.39653333rem;
  padding-right: 0.39653333rem;
  line-height: 100%;
}
.topPreset a .iconfont {
  font-size: 0.48rem;
}
.topPreset h2 {
  width: 100%;
  text-align: center;
  font-size: 0.48rem;
}
/* 通用底栏 */
/* 
预设代码：
<div class="bottomStyle">
    < !-- 任务 -->
    <div class="tesk">
        <a id="teskBtn" href="javascript:;">
            <span class="iconfont icon-xietongrenwu"></span>
            <p>任务</p>
        </a>
    </div>
    < !-- 消息 -->
    <div class="information">
        <a id="informationBtn" href="javascript:;">
            <span class="iconfont icon-btn_mess_nor"></span>
            <p>消息</p>
        </a>
    </div>
    < !-- 我的 -->
    <div class="mine">
        <a id="mineBtn" href="javascript:;">
            <span class="iconfont icon-btn_mine_nor"></span>
            <p>我的</p>
        </a>
    </div>
</div>
*/
.bottomStyle {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.28rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.bottomStyle div {
  text-align: center;
}
.bottomStyle div a .iconfont {
  display: block;
  color: #818181;
  font-size: 0.48rem;
}
.bottomStyle div a p {
  color: #818181;
  font-size: 0.26666667rem;
}
/* 公共版心 */
.wrapper {
  width: 9.2rem;
  border-radius: 0.26666667rem;
  margin: 0.4rem auto;
  background-color: #fff;
}
/* 全屏半透明黑色遮罩 */
/* 
预设代码：
<div class="screenMask"></div>
*/
.screenMask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  z-index: -1;
  transition: all 0.3s;
}
/* 悬浮文字提醒 */
/* 
预设代码：
<div class="floatingTips">
    <span>提示文字</span>
</div>
*/
.floatingTips {
  position: fixed;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 2.4rem;
  height: 0.8rem;
  background-color: #2a2929;
  border-radius: 0.26666667rem;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.floatingTips span {
  font-size: 0.37333333rem;
  color: #fff;
}
.floatingTips.TipsActiveClass {
  animation: floatingTipsActive 3s;
}
@keyframes floatingTipsActive {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
/* 空内容提示 */
/* 
预设代码：
<div class="emptyContent">
    <img src="./images/不存在@2x.png" alt="" />
    <p class="emptyContentHint">空信息提示</p>
</div>
*/
.emptyContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.emptyContent img {
  width: 5.33333333rem;
  height: 3.2rem;
}
.emptyContent p {
  font-size: 0.37333333rem;
  color: #818181;
}
/* 
    ########### 快捷样式 ###########
*/
/* flex居中 给子元素居中 子元素与父元素都要设置宽度才能生效 */
.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* position子绝父相利用margin居中 */
.positionMarginCenter {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
/* position子绝父相利用transform居中 */
.positionTransformCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 
 * 全局布局样式
 * 
 * 备注：成员可以添加全局样式，添加后请做两件事： 
 *      1.为你的样式添加注释
 *      2.将新增的样式发送到群里，告知全体成员！【重要】
 *
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  overflow-x: hidden;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, PingFangSC-Regular, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.37333333rem;
  color: #2a2929;
  background-color: #f4f4f4;
}
ins,
a {
  text-decoration: none;
  color: #2a2929;
}
ol,
ul {
  list-style: none;
}
i {
  font-style: normal;
}
input,
textarea {
  border: none;
  background-color: unset;
  outline: unset;
}
.notice p {
  opacity: 0;
  margin-top: 0.64613333rem;
  margin-left: 0.58666667rem;
  font-size: 0.37333333rem;
  color: #818181;
}
.notice .allow {
  margin-top: 0.15386667rem;
  height: 1.6rem;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.notice .allow .text {
  font-size: 0.42666667rem;
  line-height: 0.58666667rem;
  margin-left: 0.6rem;
}
.notice .allow .btn {
  position: relative;
  width: 1.6rem;
  height: 0.85333333rem;
  border-radius: 0.42666667rem;
  background-color: #EDEDED;
  margin-left: 3.14666667rem;
  border: none;
}
.notice .allow .btn .dot {
  position: absolute;
  top: 50%;
  left: 0.10666667rem;
  transform: translateY(-50%);
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 50%;
  background-color: #fff;
}
.notice .allow .btn.active {
  background-color: #EF4F3F;
}
.notice .allow .btn.active .dot {
  left: 0.8rem;
}
